<template>
  <div class="end-box">
    <div class="end-box-title" v-if="type == 'show'">结束</div>
    <div v-else class="box">
      <div class="header">
        <div class="title">数据转换/数据标签</div>
        <div class="btn" @click="handleEdit">
          <el-icon><Edit /></el-icon>
        </div>
      </div>
      <div class="box-content">
        <div class="box-content-item">
          <div class="label">数据转换：</div>
          <div class="value">
            <el-tag v-for="(item, index) in fieldList.filter((i) => i.change)" :key="index">
              {{ item.joinReName }}
            </el-tag>
          </div>
        </div>
        <div class="box-content-item">
          <div class="label">数据标签：</div>
          <div class="value">
            <el-tag v-for="(item, index) in fieldList.filter((i) => i.tag || i.customTag)" :key="index">
              {{ item.joinReName }}
            </el-tag>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="数据转换/数据标签" width="80%" align-center append-to-body v-model="isShowDialog">
      <el-table :data="fieldList" ref="tableRef" border max-height="50vh" style="width: 100%" row-key="joinReName">
        <el-table-column label="字段名" prop="joinReName" align="center" />
        <el-table-column label="字段类型" prop="DATA_TYPE" align="center" width="100px" />
        <el-table-column label="字段长度" prop="DATA_LENGTH" align="center" width="100px" />
        <el-table-column label="注释" prop="COMMENTS" align="center">
          <template #default="scope">
            <el-input v-model="scope.row.FIELD_NAME" />
          </template>
        </el-table-column>
        <el-table-column label="标签" prop="RANGE" align="center">
          <template #default="scope">
            <div v-if="scope.row.RANGE">
              {{ scope.row.RANGE_VALUE || scope.row.RANGE }}
            </div>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="数据转换" align="center" width="120px">
          <template #default="scope">
            <el-tooltip placement="top" content="数据转换">
              <el-icon
                style="margin-left: 10px; cursor: pointer"
                :size="20"
                :color="scope.row.change ? '#67C23A' : '#ccc'"
                @click="handleDataChange(scope.row)"
              >
                <EditPen />
              </el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="数据标签" align="center" width="120px">
          <template #default="scope">
            <span v-if="scope.row.RANGE">
              <el-tooltip placement="top" content="标签详情">
                <el-icon
                  style="margin-left: 10px; cursor: pointer"
                  :size="20"
                  color="#E6A23C"
                  @click="handleTagInfo(scope.row)"
                >
                  <Search />
                </el-icon>
              </el-tooltip>
              <el-tooltip v-if="!scope.row.tag" placement="top" content="启用标签">
                <el-icon
                  style="margin-left: 10px; cursor: pointer"
                  :size="20"
                  color="#ccc"
                  @click="handleUseTag(scope.row)"
                >
                  <Flag />
                </el-icon>
              </el-tooltip>
              <el-tooltip v-else placement="top" content="移除标签">
                <el-icon
                  style="margin-left: 10px; cursor: pointer"
                  :size="20"
                  color="#67C23A"
                  @click="handleUnuseTag(scope.row)"
                >
                  <Flag />
                </el-icon>
              </el-tooltip>
            </span>
            <el-tooltip placement="top" content="自定义标签">
              <el-icon
                style="margin-left: 10px; cursor: pointer"
                :size="20"
                :color="scope.row.customTag ? '#67C23A' : '#ccc'"
                @click="handleTag(scope.row)"
              >
                <EditPen />
              </el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <el-button @click="isShowDialog = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>
    <el-dialog v-model="isShowDataChangeDialog" :title="currentField.joinReName" width="70%" append-to-body>
      <div>
        <div v-for="(item, index) in currentCaseList" :key="item" class="add-item">
          <el-row :gutter="20">
            <el-col :span="11">
              <el-form-item label="条件：">
                <el-tree
                  style="width: 100%"
                  empty-text="暂无条件"
                  :data="getConditionTreeData(item.condition)"
                  :props="{ label: 'sql' }"
                />
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="转换值：">
                <el-input v-model="item.changeValue" />
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <div style="display: flex; justify-content: flex-end; align-items: center">
                <el-icon
                  style="margin-right: 10px; cursor: pointer"
                  :size="20"
                  color="#409EFF"
                  @click="handleChangeEdit(index)"
                >
                  <EditPen />
                </el-icon>
                <el-icon
                  style="margin-right: 10px; cursor: pointer"
                  :size="20"
                  color="#F56C6C"
                  @click="handleChangeDel(index)"
                >
                  <Delete />
                </el-icon>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="add-item">
          <el-row>
            <el-col :span="12">
              <el-form-item label="缺省值：">
                <el-input v-model="currentField.defaultValue" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="data-change-add" @click="handleAddDataChange">
        <el-icon :size="40"><Plus /></el-icon>
      </div>
      <template #footer>
        <el-button type="danger" @click="handleDataChangeRemove">移除数据转换</el-button>
        <el-button @click="isShowDataChangeDialog = false">取消</el-button>
        <el-button type="primary" @click="handleDataChangeSubmit">确定</el-button>
      </template>
    </el-dialog>
    <el-dialog v-model="isShowAddDataChangeDialog" :title="currentField.joinReName" width="70%" append-to-body>
      <Condition
        v-if="isShowAddDataChangeDialog"
        ref="conditionRef"
        :fieldList="
          [currentField].map((item) => {
            return { ...item, COLUMN_NAME: `${item.tableName}.${item.reName}` }
          })
        "
      />
      <template #footer>
        <el-button @click="isShowAddDataChangeDialog = false">取消</el-button>
        <el-button type="primary" @click="handleAddDataChangeSubmit">确定</el-button>
      </template>
    </el-dialog>
    <el-dialog v-model="isShowTagDialog" :title="currentField.joinReName" width="40%" append-to-body>
      <el-table :data="customTagList" border style="width: 100%" max-height="50vh">
        <el-table-column prop="value" label="值" align="center">
          <template #default="scope">
            <el-input v-model="scope.row.value" />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="标签" align="center">
          <template #default="scope">
            <el-input v-model="scope.row.name" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="100px">
          <template #default="scope">
            <el-icon style="cursor: pointer" :size="20" color="#F56C6C" @click="handleTagDel(scope.$index)">
              <Delete />
            </el-icon>
          </template>
        </el-table-column>
      </el-table>
      <div class="data-change-add" @click="handleAddTag">
        <el-icon :size="40"><Plus /></el-icon>
      </div>
      <template #footer>
        <el-button type="danger" @click="handleTagRemove">移除标签</el-button>
        <el-button @click="isShowTagDialog = false">取消</el-button>
        <el-button type="primary" @click="handleTagSubmit">确定</el-button>
      </template>
    </el-dialog>
    <el-dialog v-model="isShowTagInfoDialog" width="50%" append-to-body title="标签详情">
      <el-table :data="tagTableList" border style="width: 100%" max-height="50vh">
        <el-table-column prop="value" label="值" align="center" />
        <el-table-column prop="name" label="标签" align="center" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup>
import { Edit, Delete, Search, Flag, EditPen, Plus } from '@element-plus/icons-vue'
import { inject, nextTick, onMounted } from 'vue-demi'
import Condition from './condition.vue'
import { getConditionTreeData } from '../index'
import { ElMessage } from 'element-plus'
import { findDomain } from '@/api/dataLink'
const prop = defineProps({
  type: {
    type: String,
    default: 'default'
  }
})
const getNode = inject('getNode')
const conditionRef = ref(null)
const isShowDialog = ref(false)
const isShowDataChangeDialog = ref(false)
const isShowAddDataChangeDialog = ref(false)
const isShowTagDialog = ref(false)
const isShowTagInfoDialog = ref(false)
const tagTableList = ref([])
const fieldList = ref([])
const currentField = ref({})
const currentCaseList = ref([])
const customTagList = ref([])
onMounted(() => {
  const node = getNode ? getNode() : ''
  if (node) {
    console.log(node.data)
    fieldList.value = node.data?.finalFields || []
  }
})
// 编辑
const handleEdit = () => {
  const node = getNode()
  console.log(node)
  fieldList.value = node.data.fields.map((item) => {
    let FIELD_NAME = item.FIELD_NAME ? item.FIELD_NAME : item.COMMENTS
    if (!FIELD_NAME) {
      FIELD_NAME = item.joinReName
    }
    return {
      ...item,
      FIELD_NAME
    }
  })
  // 覆盖之前的修改
  if (node.data.finalFields?.length) {
    const finalFields = node.data.finalFields
    fieldList.value.forEach((item) => {
      const f = finalFields.find((i) => i.joinReName == item.joinReName)
      if (f) {
        item.FIELD_NAME = f.FIELD_NAME
        item.change = f.change
        item.changeList = f.changeList
        item.customTag = f.customTag
        item.defaultValue = f.defaultValue
        item.tag = f.tag
        item.dict = f.dict
      }
    })
  }

  isShowDialog.value = true
}
// 数据转换点击
const handleDataChange = (row) => {
  console.log(row)

  currentField.value = row
  currentCaseList.value = row.changeList || []
  isShowDataChangeDialog.value = true
}
// 添加关系点击
const handleAddDataChange = () => {
  isShowAddDataChangeDialog.value = true
}
// 确定添加关系
const handleAddDataChangeSubmit = () => {
  const treeData = conditionRef.value.treeData
  currentCaseList.value.push({
    condition: treeData,
    value: ''
  })
  isShowAddDataChangeDialog.value = false
}
// 确定数据转换
const handleDataChangeSubmit = () => {
  console.log(currentField.value)
  if (!currentCaseList.value.length) {
    ElMessage.warning('请添加数据转换条件')
    return
  }
  for (let i of fieldList.value) {
    if (i.joinReName == currentField.value.joinReName) {
      i.changeList = currentCaseList.value
      i.change = true
      i.defaultValue = currentField.value.defaultValue
      isShowDataChangeDialog.value = false
      currentCaseList.value = []
      return
    }
  }
}
// 移除数据转换
const handleDataChangeRemove = () => {
  for (let i of fieldList.value) {
    if (i.joinReName == currentField.value.joinReName) {
      delete i.changeList
      delete i.change
      isShowDataChangeDialog.value = false
      return
    }
  }
}
// 关系编辑
const handleChangeEdit = (index) => {
  isShowAddDataChangeDialog.value = true
  nextTick(() => {
    conditionRef.value.treeData = currentCaseList.value[index].condition
  })
}
// 关系删除
const handleChangeDel = (index) => {
  currentCaseList.value.splice(index, 1)
}
// 确定
const handleSubmit = () => {
  console.log(fieldList.value)
  isShowDialog.value = false
  const node = getNode()
  node.setData(
    {
      finalFields: fieldList.value
    },
    { deep: false }
  )
}
// 自定义标签
const handleTag = (row) => {
  console.log(row)

  currentField.value = row
  customTagList.value = row.dict || []
  isShowTagDialog.value = true
  if (row.change && (!row.dict || row.dict.length == 0)) {
    customTagList.value = row.changeList.map((item) => {
      return {
        value: item.changeValue,
        name: ''
      }
    })
  }
}
// 新增自定义标签
const handleAddTag = () => {
  customTagList.value.push({
    value: '',
    name: ''
  })
}
const handleTagDel = (index) => {
  console.log(index)
  customTagList.value.splice(index, 1)
}
const handleTagSubmit = () => {
  for (let i of fieldList.value) {
    if (i.joinReName == currentField.value.joinReName) {
      i.dict = customTagList.value
      i.customTag = true
      i.tag = false
      customTagList.value = []
      isShowTagDialog.value = false
      return
    }
  }
}
const handleTagRemove = () => {
  for (let i of fieldList.value) {
    if (i.joinReName == currentField.value.joinReName) {
      delete i.dict
      delete i.customTag
      i.tag = false
      isShowTagDialog.value = false
      return
    }
  }
}
const handleUseTag = (row) => {
  row.tag = true
  if (row.customTag) {
    delete row.customTag
    delete row.dict
  }
  findDomain(row.RANGE).then((res) => {
    row.dict = res.data
  })
}
const handleUnuseTag = (row) => {
  row.tag = false
}
const handleTagInfo = (row) => {
  tagTableList.value = []
  console.log(row)
  isShowTagInfoDialog.value = true
  findDomain(row.RANGE).then((res) => {
    tagTableList.value = res.data
  })
}
</script>

<style lang="scss" scoped>
.end-box {
  height: 100%;
  width: 100%;
  overflow: auto;
  .end-box-title {
    width: 100%;
    height: 100%;
    background-color: #fff;
    // border: 1px solid #888;
    color: #f56c6c;
    border-radius: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px solid #f38c8c;
    &:hover {
      background-color: #f56c6c;
      color: #fff;
    }
  }
}
.box {
  height: 100%;
  width: 100%;
  background-color: #f9f9f9;
  box-shadow: 0 0 10px #ccc;
  border-radius: 10px;
  border: 2px solid #f56c6c;
  .header {
    padding: 10px;
    border-bottom: 1px solid #f56c6c;
    color: #f56c6c;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    .title {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .btn {
      margin: 0 5px;
      cursor: pointer;
    }
  }
}
.data-change-add {
  height: 50px;
  width: 300px;
  border: 2px solid #5473e8;
  color: #fff;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin: 0 auto;
  background-color: #5473e8;
  transition: all 0.3s;
  &:hover {
    background-color: #6985e8;
    color: #fff;
  }
}
.add-item {
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
  margin-top: 10px;
}
.box-content {
  height: calc(100% - 70px);
  overflow: auto;
  padding: 10px;
  .box-content-item {
    display: flex;
    .label {
      width: 90px;
      text-align: right;
      color: #888;
    }
    .value {
      width: calc(100% - 90px);
    }
  }
  .el-tag {
    margin: 0 5px 5px 0;
  }
}
</style>
